<script lang="ts" setup>
import { ref } from 'vue'
import { QForm, type FormItemRows, QTable, type TableColums } from '@meetjs/element-plus-kit'

const opts1 = [
	{
		label: '选项1',
		value: '1'
	},
	{
		label: '选项2',
		value: '2'
	}
]
const opts = ref(opts1)
const formRef = ref<any>(null)
const FormValue = ref({})
const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '姓名',
		prop: 'name'
	},
	{
		type: 'select',
		label: '爱好',
		prop: 'region',
		options: opts.value,
		attrs: {
			style: 'width: 200px',
			onChange: () => {
				console.log(1111)
			}
		}
	},
	{
		type: 'date-picker',
		label: '日期',
		prop: 'count4',
		attrs: { type: 'date' }
	}
])

const onSearch = () => {
	console.log(FormValue.value)
}

const page = ref({
	currentPage: 2,
	pageSize: 10,
	total: 30
})

const tableData = ref([
	{
		name: '张三',
		age: 18,
		sex: '男'
	},
	{
		name: '李四',
		age: 20,
		sex: '女'
	},
	{
		name: '王五',
		age: 25,
		sex: '男'
	},
	{
		name: '赵六',
		age: 23,
		sex: '女'
	},
	{
		name: '钱七',
		age: 21,
		sex: '男'
	}
])
const columns = ref<TableColums[]>([
	{
		type: 'selection',
		align: 'center'
	},
	{
		label: '序号',
		type: 'index',
		align: 'center',
		width: 60
	},
	{
		prop: 'name',
		label: '姓名'
	},
	{
		prop: 'age',
		label: '年龄'
	},
	{
		prop: 'sex',
		label: '性别'
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: 200,
		align: 'center'
	}
])
</script>
<template>
	<div class="table-page-box">
		<div class="filter-box">
			<QForm
				ref="formRef"
				inline
				:model="FormValue"
				:form-options="formOptions"
				:buttons="['search', 'reset']"
				@search="onSearch"
			/>
		</div>
		<div class="table-box">
			<QTable
				:data="tableData"
				:columns="columns"
				:page="page"
			>
				<template #headerLeft>
					<el-button type="primary">导出</el-button>
				</template>
				<template #action>
					<el-button
						type="primary"
						link
					>
						查看
					</el-button>
					<el-button
						type="primary"
						link
					>
						编辑
					</el-button>
					<el-button
						type="danger"
						link
					>
						删除
					</el-button>
				</template>
			</QTable>
		</div>
	</div>
</template>
